<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Field Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings to mimic the hand-drawn look
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        // Use a font that can look somewhat handwritten
        ctx.font = 'bold 20px "Comic Sans MS", cursive, sans-serif';

        // --- Helper Function to Draw Arrows ---
        function drawArrow(ctx, fromx, fromy, tox, toy) {
            const headlen = 10; // length of head in pixels
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        }
        
        // --- Define Vertices of the Cuboid ---
        // Based on visual analysis of the provided image
        const A = { x: 180, y: 200 }; // Top-left-back
        const B = { x: 290, y: 220 }; // Top-front-left (from this perspective)
        const C = { x: 340, y: 190 }; // Top-front-right
        const D = { x: 230, y: 170 }; // Top-back-right
        const E = { x: 180, y: 320 }; // Bottom-left-back (Origin of the block)
        const F = { x: 290, y: 340 }; // Bottom-front-left
        const G = { x: 340, y: 310 }; // Bottom-front-right
        const H = { x: 230, y: 290 }; // Bottom-back-right

        // --- Draw the Bottom Plane ---
        ctx.beginPath();
        ctx.moveTo(80, 350);
        ctx.lineTo(420, 400);
        ctx.lineTo(470, 330);
        ctx.lineTo(130, 280);
        ctx.closePath();
        ctx.stroke();

        // --- Draw the Cuboid ---
        // Solid lines (visible edges)
        ctx.beginPath();
        // Top face
        ctx.moveTo(A.x, A.y); ctx.lineTo(B.x, B.y);
        ctx.lineTo(C.x, C.y);
        ctx.lineTo(D.x, D.y);
        ctx.lineTo(A.x, A.y);
        // Visible vertical edges
        ctx.moveTo(A.x, A.y); ctx.lineTo(E.x, E.y);
        ctx.moveTo(B.x, B.y); ctx.lineTo(F.x, F.y);
        ctx.moveTo(C.x, C.y); ctx.lineTo(G.x, G.y);
        // Visible bottom edges
        ctx.moveTo(F.x, F.y); ctx.lineTo(G.x, G.y);
        ctx.moveTo(H.x, H.y); ctx.lineTo(G.x, G.y);
        ctx.stroke();

        // Dashed lines (hidden edges)
        ctx.beginPath();
        ctx.setLineDash([4, 4]);
        ctx.moveTo(E.x, E.y); ctx.lineTo(F.x, F.y); // bottom-left (side a)
        ctx.moveTo(E.x, E.y); ctx.lineTo(H.x, H.y); // bottom-back
        ctx.moveTo(D.x, D.y); ctx.lineTo(H.x, H.y); // back-right vertical
        ctx.stroke();
        
        // --- Draw Coordinate Axes ---
        // Axes are also dashed in the original image
        const axisOrigin = E;
        ctx.beginPath();
        // z-axis
        drawArrow(ctx, axisOrigin.x, axisOrigin.y, axisOrigin.x, 140);
        // x-axis
        drawArrow(ctx, axisOrigin.x, axisOrigin.y, 320, 410);
        // y-axis
        drawArrow(ctx, axisOrigin.x, axisOrigin.y, 380, 200);
        ctx.stroke();
        ctx.setLineDash([]); // Reset to solid lines

        // --- Draw the Wire J ---
        const topCenter = { 
            x: (A.x + B.x + C.x + D.x) / 4, 
            y: (A.y + B.y + C.y + D.y) / 4 
        };
        ctx.beginPath();
        ctx.arc(topCenter.x, topCenter.y, 3, 0, 2 * Math.PI); // Small dot for contact
        ctx.fill();
        ctx.beginPath();
        ctx.moveTo(350, 140);
        ctx.lineTo(topCenter.x, topCenter.y);
        ctx.stroke();
        
        // --- Add Labels ---
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        // Figure caption
        ctx.font = 'bold 18px sans-serif';
        ctx.fillText("Fig. 2.68", 250, 470);
        
        // Physics labels
        ctx.font = 'italic bold 20px "Times New Roman", serif';
        ctx.fillText("c", A.x - 15, (A.y + E.y) / 2);
        ctx.fillText("a", (E.x + F.x) / 2, (E.y + F.y) / 2 + 15);
        ctx.fillText("b", (G.x + H.x) / 2, G.y + 15);
        ctx.fillText("J", 365, 140);
        ctx.fillText("φ = 0", 120, 310);
        
        // Axis labels
        ctx.fillText("z", axisOrigin.x - 15, 140);
        ctx.fillText("x", 325, 415);
        ctx.fillText("y", 390, 195);

    </script>
</body>
</html>